//
//  Vertical nav (Sidebar left)
//  -----------------------------------------------

.nav-pf-vertical {
  background-color: @nav-pf-vertical-bg-color;
  top: @navbar-os-header-height-mobile;
  z-index: 990;
  @media(min-width: @screen-sm-min) {
    // Hide at wider screen widths unless there is a project.
    display: none;
  }
  .has-project-bar & {
    top: (@navbar-os-header-height-mobile + @project-bar-height-mobile);
    @media(min-width: @screen-sm-min) {
      display: block;
      top: (@navbar-os-header-height-desktop + @project-bar-height-desktop);
    }
  }
  .list-group-item {
    border-color: @nav-pf-vertical-border-color;
    &:after {
      background: @nav-pf-vertical-border-inset-color;
      content: '';
      display: block;
      height: 1px;
      position: absolute;
      top: 0px;
      width: 100%;
    }
    // override PatternFly :hover as we don't want :hover changes
    &:hover > a {
      background-color: transparent;
      color: @nav-pf-vertical-color;
      .fa,
      .pficon {
        color: @nav-pf-vertical-icon-color;
      }
    }
    > a:focus,
    &.active > a,
    &.is-hover > a {
      background-color: @nav-pf-vertical-active-bg-color;
      color: @nav-pf-vertical-active-color !important;
      &:after {
        color: @nav-pf-vertical-active-color !important;
      }
      .fa,
      .pficon {
        color: @nav-pf-vertical-active-icon-color;
      }
    }
    > a {
      font-size: (@font-size-base + 1);
      font-weight: 300 !important;
      text-decoration: none;
      @media(max-width: @screen-xs-max) {
        height: auto;
        padding: 10px 15px;
      }
      .fa,
      .pficon {
        color: @nav-pf-vertical-icon-color;
        font-size: (@font-size-base + 3);
        @media(min-width: @screen-sm-min) {
          font-size: (@font-size-base + 6);
        }
      }
      .list-group-item-value {
        line-height: inherit;
        max-width: none; // IE11, fixes https://github.com/patternfly/patternfly/issues/807
        text-decoration: none !important;
      }
    }
    &.secondary-nav-item-pf {
      > a:after {
        font-size: @font-size-large; // make right arrow size consistent with project-bar arrows
        padding: 16px 0; // padding aligns arrow vertically
        @media(max-width: @screen-xs-max) {
          padding: 8px 0;
        }
      }
      &.is-hover > a {
        width: @nav-pf-vertical-width + 1; // cover .nav-pf-vertical border-right
        z-index: @zindex-navbar-fixed + 1; // raise z-index to overlay
        &:after {
          color: @nav-pf-vertical-active-color;
          right: 21px; // move 1px to offset parent width 1px increase onHover due to pf rules
        }
      }
    }
  }
  &.collapsed {
    .list-group-item.secondary-nav-item-pf {
      &.is-hover > a {
        width: @nav-pf-vertical-collapsed-width + 2; // cover .nav-pf-vertical.collapsed border-right
      }
      &.is-hover,
      &:hover,
      &.active {
        > a:after {
          right: 12px !important; // prevent arrow moving onHover due to pf rules
        }
      }
    }
    .nav-pf-secondary-nav {
      left: (@nav-pf-vertical-collapsed-width - 1); // adjust for 1px border
    }
  }
  &.hide-mobile-nav {
    left: -(@nav-pf-vertical-width + 2); // width + box-shadow
  }
  &.show-mobile-nav {
    box-shadow: 2px 0 3px rgba(3,3,3,.15);
    left: 0;
    transition: left .1s ease-in-out;
  }
  .nav-pf-secondary-nav {
    background: @nav-pf-vertical-active-bg-color;
    border-left: 0;
    border-right: 1px solid @nav-pf-vertical-border-color;
    top:(@project-bar-height-mobile + @navbar-os-header-height-mobile);
    width: @nav-pf-vertical-width + 1; // adjust for 1px border
    @media(min-width: @screen-sm-min) {
      border-left: 1px solid @nav-pf-vertical-border-color; // inset border between primary and secondary
      top: (@project-bar-height-desktop + @navbar-os-header-height-desktop);
    }
    .list-group-item {
      &:after {
        display: none;
      }
      &.active > a {
        background: @nav-pf-vertical-secondary-active-bg-color;
        &:hover {
          background: @nav-pf-vertical-secondary-active-bg-color;
        }
      }
      > a {
        background: transparent;
        &:focus,
        &:hover {
          background: @nav-pf-vertical-secondary-hover-color;
          color: @nav-pf-vertical-secondary-active-color;
          text-decoration: none;
        }
      }
    }
  }
  .nav-item-pf-header {
    font-size: (@font-size-base + 1);
  }
  .nav-pf-secondary-nav .list-group-item > a {
    padding: 4px 0 2px 0;
    margin-left: 20px;
  }
}
